<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Running</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://space.ports-intl.com/Ports/common/Lib/js/layui/v2.9.16/css/layui.css" rel="stylesheet">
    <script src="https://space.ports-intl.com/Ports/common/Lib/jQuery/jQuery-2.2.1/jquery-2.2.1.min.js"></script>
    <script src="https://space.ports-intl.com/Ports/common/Lib/js/layui/v2.9.16/layui.js"></script>
    <script src="https://space.ports-intl.com/Ports/common/Lib/js/IndexedDB/dexie/dexie.js"></script>
    <style>
        .container{margin: 15px;}
        .name-input{padding: 0px; text-align: center; border: 0px;}
        .name-row{ padding: 8px 0px; border-bottom: 1px solid #d2d2d2;}
        .layui-form-label{ width: 100%; text-align: left; font-size: 14px; font-weight: bold; }
        .layui-input-block{ margin-left: 0px;}
        .game-input-block{ border-color: #d2d2d2 !important; border-radius: 0 0 2px 2px; border: 1px solid #d2d2d2; padding: 10px; }
        .add_panel{  display: none; margin: 15px;}
        .score-label{ line-height: 35px; text-align: center; font-weight: bold; }
        .landlord{ background-color: #c3ffce;}
    </style>
</head>

<body>
<div class="container">
    <div class="layui-panel">
        <div class="layui-row name-row">
            <div class="layui-col-xs2">
                <div class="grid-demo"><input type="text" id="name-input-p1" data-player="p1" value="玩家1" class="layui-input name-input"></div>
            </div>
            <div class="layui-col-xs2">
                <div class="grid-demo"><input type="text" id="name-input-p2" data-player="p2" value="玩家2" class="layui-input name-input"></div>
            </div>
            <div class="layui-col-xs2">
                <div class="grid-demo"><input type="text" id="name-input-p3" data-player="p3" value="玩家3" class="layui-input name-input"></div>
            </div>
            <div class="layui-col-xs2">
                <div class="grid-demo"><input type="text" id="name-input-p4" data-player="p4" value="玩家4" class="layui-input name-input"></div>
            </div>
            <div class="layui-col-xs2">
                <div class="grid-demo"><input type="text" id="name-input-p5" data-player="p5" value="玩家5" class="layui-input name-input"></div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <button type="button" id="saveIDs" class="layui-btn layui-btn-sm layui-btn-normal">保存</button>
                </div>
            </div>
        </div>
        <div class="layui-row name-row">
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label id="amt_p1">0</label>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label id="amt_p2">0</label>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label id="amt_p3">0</label>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label id="amt_p4">0</label>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label id="amt_p5">0</label>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="score-label">
                    <label>合计</label>
                </div>
            </div>
        </div>
        <div id="warList">

        </div>
    </div>
    <div id="add_panel" class="add_panel">
        <form class="layui-form layui-form-pane" action="" lay-filter="resultForm">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">地主</label>
                <div class="layui-input-block game-input-block">
                    <input type="radio" id="landlord-p1" name="landlord" class="landlord" value="p1" lay-skin="tag" title="选项1">
                    <input type="radio" id="landlord-p2" name="landlord" class="landlord" value="p2" lay-skin="tag" title="选项2">
                    <input type="radio" id="landlord-p3" name="landlord" class="landlord" value="p3" lay-skin="tag" title="选项3">
                    <input type="radio" id="landlord-p4" name="landlord" class="landlord" value="p4" lay-skin="tag" title="选项3">
                    <input type="radio" id="landlord-p5" name="landlord" class="landlord" value="p5" lay-skin="tag" title="选项3">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">赢家</label>
                <div class="layui-input-block game-input-block">
                    <input type="checkbox" id="winner-p1" name="winner[p1]" class="winner" value="p1" lay-skin="tag" title="选项1">
                    <input type="checkbox" id="winner-p2" name="winner[p2]" class="winner" value="p2" lay-skin="tag" title="选项2">
                    <input type="checkbox" id="winner-p3" name="winner[p3]" class="winner" value="p3" lay-skin="tag" title="选项3">
                    <input type="checkbox" id="winner-p4" name="winner[p4]" class="winner" value="p4" lay-skin="tag" title="选项3">
                    <input type="checkbox" id="winner-p5" name="winner[p5]" class="winner" value="p5" lay-skin="tag" title="选项3">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">炸弹</label>
                <div class="layui-input-block game-input-block">
                    <input type="radio" name="bomb" class="bomb" value="0" title="0个">
                    <input type="radio" name="bomb" class="bomb" value="1" title="1个">
                    <input type="radio" name="bomb" class="bomb" value="2" title="2个">
                    <input type="radio" name="bomb" class="bomb" value="3" title="3个">
                    <input type="radio" name="bomb" class="bomb" value="4" title="4个">
                    <input type="radio" name="bomb" class="bomb" value="5" title="5个">
                    <input type="radio" name="bomb" class="bomb" value="6" title="6个">
                    <input type="radio" name="bomb" class="bomb" value="7" title="7个">
                    <input type="radio" name="bomb" class="bomb" value="8" title="8个">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="">
                    <center>
                        <button type="button" class="layui-btn" id="confirmResult">确认</button>
                        <button type="reset" id="reset" class="layui-btn">重置</button>
                    </center>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="record_tpl">
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div class="score-label {{= d.landlord == 'p1' ? 'landlord' : 'cccc' }}">
                <label class="{{= d.p1 > 0 ? 'layui-badge layui-bg-blue' : 'bbbb' }}">{{= d.p1 }}{{= d.landlord == 'p1'? '('+d.bomb+')': '' }}</label>
            </div>
        </div>
        <div class="layui-col-xs2 {{= d.landlord == 'p2' ? 'landlord' : 'cccc' }}">
            <div class="score-label">
                <label class="{{= d.p2 > 0 ? 'layui-badge layui-bg-blue' : 'bbbb' }}">{{ d.p2 }}{{= d.landlord == 'p2'? '('+d.bomb+')': '' }}</label>
            </div>
        </div>
        <div class="layui-col-xs2 {{= d.landlord == 'p3' ? 'landlord' : 'cccc' }}">
            <div class="score-label">
                <label class="{{= d.p3 > 0 ? 'layui-badge layui-bg-blue' : 'bbbb' }}">{{ d.p3 }}{{= d.landlord == 'p3'? '('+d.bomb+')': '' }}</label>
            </div>
        </div>
        <div class="layui-col-xs2 {{= d.landlord == 'p4' ? 'landlord' : 'cccc' }}">
            <div class="score-label">
                <label class="{{= d.p4 > 0 ? 'layui-badge layui-bg-blue' : 'bbbb' }}">{{ d.p4 }}{{= d.landlord == 'p4'? '('+d.bomb+')': '' }}</label>
            </div>
        </div>
        <div class="layui-col-xs2 {{= d.landlord == 'p5' ? 'landlord' : 'cccc' }}">
            <div class="score-label">
                <label class="{{= d.p5 > 0 ? 'layui-badge layui-bg-blue' : 'bbbb' }}">{{ d.p5 }}{{= d.landlord == 'p5'? '('+d.bomb+')': '' }}</label>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="score-label">
                <button type="button" class="layui-btn layui-btn-sm layui-bg-red delete_row" data-landlord="{{=d.landlord}}" data-warid="{{=d.id}}">删除</button>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="test_tpl">
    <h3>{{= d.p1 }}</h3>
    <p>性别：{{= d.p2 }}</p>
</script>

<script>

const db = new Dexie('JayDB');
db.version(1).stores({
    WarRecords: '++id, p1, p2, p3, p4, p5, landlord, bomb, time'
});
var score = {
        'p1': 0,
        'p2': 0,
        'p3': 0,
        'p4': 0,
        'p5': 0
    }

layui.use(['layer', 'util'],function(){
    var util = layui.util;
    var $ = layui.$;
    var form = layui.form
    var openUp = 0;
    var currentID = 0;
    var war_record = [];
    
    reloadPlayersData();
    listAllWars();

    var laytpl = layui.laytpl;

    // 自定义固定条
    util.fixbar({
        bars: [{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
            type: '新增',
            icon: 'layui-icon-add-1'
        }, {
            type: '重新开始',
            icon: 'layui-icon-delete'
        }, {
            type: '测试',
            icon: 'layui-icon-service'
        }],
        // 点击事件
        click: function(type){
            if(type == '新增'){
                // $('.add_panel').toggle();
                $('#reset').click();
                openUp = layer.open({
                    type: 1,
                    // shade: false, // 不显示遮罩
                    title: "战果记录",
                    shadeClose: true,
                    content: $('#add_panel'), // 捕获的元素
                    end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }

            if(type == '重新开始'){
                deleteAllWars();
            }

            if(type == '测试'){
                layer.confirm('无聊吗？点我做什么？', {icon: 3, btn: ['是的，无聊', '不小心点错了']}, function(){
                    layer.msg('无聊请尖叫', {icon: 1});
                }, function(){
                    layer.msg('下次小心点');
                });
                listAllWars();
            }
        }
    });

    $('#saveIDs').on('click', function(){
        $.each($('.name-input'),function(obj){
            layui.data('players', {
                key: $(this).data('player'),
                value: this.value
            });
        });
        layer.msg('保存成功');
        reloadPlayersData();
    })

    $('.name-input').on('click', function(){
        this.select();
    });

    $('#confirmResult').on('click', function(){
        console.log(form.val('resultForm'));
        var msg = '';
        var winner = [];
        var landlord = '';
        var bomb = 0;
        layui.each(form.val('resultForm'), function(key,value){

            console.log(key.indexOf('winner'));

            if(key == 'landlord'){
                msg += "地主是：" + getPlayerName(value) + '。';
                landlord = value;
            }

            if(key.indexOf('winner') === 0){
                msg += "赢家是：" + getPlayerName(value) + '。';
                winner.push(value);
            }

            if(key == 'bomb'){
                msg += "一共有" + value + '个炸弹。';
                bomb = value;
            }
        });

        layui.each(layui.data('players'), function(){
            console.log(1);
        });

        console.log(landlord, winner, bomb);
        layer.close(openUp);
        console.log(msg);
        cal(landlord, winner, bomb);
        listAllWars();

    })

    function reloadPlayersData(){
        layui.each(layui.data('players'), function(key, value){
            // console.log(key, value);
            $("#name-input-" + key).val(value);
            $("#landlord-" + key).attr('title', value);
            $("#winner-" + key).attr('title', value);
        })
        form.render();
    }

    function getPlayerName(player){
        return layui.data('players')[player];
    }

    function cal(landlord, winner, bomb){
        
        bomb = parseInt(bomb);
        console.log(landlord + getPlayerName(landlord) + '当地主；' + '一共炸弹：' + bomb);

        finalResult = {};
        finalResult['landlord'] = landlord;
        finalResult['bomb'] = bomb;
        layui.each(layui.data('players'), function(key, value){
            scoreCheckout = 0;
            if(key==landlord && winner.includes(key)){
                //这个人是地主
                if(winner.length == 1){
                    //只有地主自己赢了 1v4
                    scoreCheckout = Math.pow(2, bomb + 2);
                }else{
                    scoreCheckout = Math.pow(2, bomb + 1);
                }
                
                console.log(value, '当地主赢了', '结算分数', scoreCheckout)
            }

            if(key==landlord && !winner.includes(key)){
                //这个人是地主
                if(winner.length == 4){
                    //只有地主自己赢了 1v4
                    scoreCheckout = Math.pow(2, bomb + 2) * -1;
                }else{
                    scoreCheckout = Math.pow(2, bomb + 1) * -1;
                }
                console.log(value, '当地主输了', '结算分数', scoreCheckout)
            }

            if(key!=landlord && winner.includes(key)){
                //这个是农民
                scoreCheckout = Math.pow(2, bomb);
                console.log(value, '当农民赢了', '结算分数', scoreCheckout)
            }

            if(key!=landlord && !winner.includes(key)){
                //这个是农民
                scoreCheckout = Math.pow(2, bomb) * -1;
                console.log(value, '当农民输了', '结算分数', scoreCheckout)
            }

            finalResult[key] = scoreCheckout;

        });

        finalResult['time'] = new Date();
        console.log(finalResult);
        db.WarRecords.add(finalResult)
    }

    function saveIntoDB(){

        db.WarRecords.add({p1: +1, p2: -5, p3: 9, p4: -8, p5: 20, time: new Date()})

    }

    function listAllWars(){

        var getTpl = document.getElementById('record_tpl').innerHTML;
        var elemView = document.getElementById('warList');
        db.WarRecords.where("id").above(currentID).each(function(row){
            laytpl(getTpl).render(row, function(str){
                $('#warList').prepend(str);
            });
            war_record.push(row);
            currentID = row['id'];
            deleteRow();
            var score_tmp = {
                'p1': 0,
                'p2': 0,
                'p3': 0,
                'p4': 0,
                'p5': 0
            }
            war_record.map(x=>{
                score_tmp['p1'] += (x['p1'])
                score_tmp['p2'] += (x['p2'])
                score_tmp['p3'] += (x['p3'])
                score_tmp['p4'] += (x['p4'])
                score_tmp['p5'] += (x['p5'])
            })

            score['p1'] = (score_tmp['p1'])
            score['p2'] = (score_tmp['p2'])
            score['p3'] = (score_tmp['p3'])
            score['p4'] = (score_tmp['p4'])
            score['p5'] = (score_tmp['p5'])

            $('#amt_p1').html(score['p1']);
            $('#amt_p2').html(score['p2']);
            $('#amt_p3').html(score['p3']);
            $('#amt_p4').html(score['p4']);
            $('#amt_p5').html(score['p5']);
        });
        
        
    }

    function deleteAllWars(){
        layer.confirm('确定删除所有记录从头开始游戏吗?', {icon: 3, title:'提示'}, function(index){
            db.delete();
            window.location.reload();
        });
    }

    function deleteRow(){
        $('.delete_row').off('click');
        $('.delete_row').on('click', function(){
            var _id = $(this).data('warid');
            var _name = getPlayerName($(this).data('landlord'));
            layer.confirm('确定删除【' + _name + '】当地主的这局吗?', {icon: 3, title:'提示'}, function(index){
                db.WarRecords.where("id").equals(_id).delete();
                window.location.reload();
            });
        })
    }
    
});
</script>
</body>

</html>